<template>
    <MyHome></MyHome>
    <div v-if="channel.adminLogin === true">
        <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="userID" label="购票者ID" width="180" />
    <el-table-column prop="userRole" label="权限" width="180" />
    <el-table-column prop="account" label="账号" />
    <el-table-column prop="password" label="密码" />
    <el-table-column prop="ecardBalance" label="余额" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="handleEdit1(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button type="danger" @click="handleEdit2(scope.$index, scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>

  </el-table>
    </div>




    <div v-if="channel.adminLogin === false" class="user">
        <img src="../../assets/管理员.png" alt="cw">
        <div class="wz1">
            您好，您的权限没有权限访问！
        </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog v-model="centerDialogVisible" title="修改用户操作" width="500" center>
    <span>
      <el-form :model="form" label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="updateuserName"  disabled/>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="updatepassWord" />
        </el-form-item>
      </el-form>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消修改用户</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">
          确认修改用户
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup>
import MyHome from '../top/MyHome.vue';
import { ElNotification } from 'element-plus'
import { useCounterStore } from '../../stores/counter'
import { ref } from 'vue'
const channel = useCounterStore()
//控制弹出框的变量
const centerDialogVisible = ref(false)
//放用户名数据
const updateuserName = ref();
//放密码数据
const updatepassWord = ref();

//表格数据
const tableData = channel.loginList;

//编辑handleEdit1
const handleEdit1 = (index, row) => {
  centerDialogVisible.value = true;
    console.log(index, row);
    updateuserName.value = row.account;
    updatepassWord.value = row.password;
}

//删除
const handleEdit2 = (index, row) => {
    console.log(index, row);
    channel.loginList.splice(index, 1);
    ElNotification({
    title: '删除通知',
    message: '用户已经删除成功！',
    duration: 0,
  })
}

</script>

<style scoped>
    .user{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 100px;
    }
    img{
        width: 100px;
        height: 100px;
    }
    .wz1{
        margin-left: 20px;
        font-size: 20px;
        font-weight: 600;
    }
</style>